<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div,img{
			padding:0;
			margin:0;
		}
		.outer{
			height:350px;
			width:350px;
			position:relative;
			float:left;
		}
		.outer img{
			height:100%;
			width:100%;	
			float:left;
			position:absolute;
			top:0;
			left:0;		
		}
		.smallimg{
			height:50%;
			width:50%;
			background:yellow;
			filter:alpha(opacity=50);
			opacity:0.5;
			border:1px solid #ddd;
			float:left;
			position: absolute;
			top:0;
			left:0;

		}
		.bigimg{
			height:350px;
			width:350px;
			float:left;
			margin-left:10px;
			overflow: hidden;
		}
		.bigimg img{
			height:700px;
			width:700px;
		}
		.show{
			display:block;
		}
		.hide{
			display:none;
		}
		.divwrap{
			width:350px;
			height:50px;
			position:absolute;
			left:0;
			top:350px;
			margin-top:20px;
			
		}

		
		
		.div2 img{
			float:left;
			margin:0 5px;
			border:1px solid #fff;
		}
		.div2 img:hover{
			border:1px solid red;
		}
	</style>
</head>
<body>
	<div class='outer'>
		<div class='bgimg'>
			<img src="images/apple1.jpg" alt="">
		</div>
		<div class='smallimg hide'></div>
	</div>
	<div class='bigimg hide'>
		<img src="images/apple01.jpg" alt="">
	</div>
	<div class='divwrap'>
		
			<div class='div2'>
				<img src="images/small1.jpg" alt="">
				<img src="images/small2.jpg" alt="">
				<img src="images/small3.jpg" alt="">
				<img src="images/small4.jpg" alt="">
				<img src="images/small5.jpg" alt="">
			
			</div>
		<!-- <button class='btn1'><</button> -->
		<!-- <button class='btn2'>></button> -->
	</div>
	<script src='js/jquery.js'></script>
	<script>
		$(function(){
			var n;
			$(".div2 img").mouseover(function(){
			
				n=$(this).index();
				 $(".bgimg")[0].innerHTML='<img src='+"images/apple"+(n+1)+'.jpg>';
	          $(".bigimg")[0].innerHTML='<img src='+"images/apple0"+(n+1)+'.jpg>';	
			})

			rata=$(".bigimg").width()/$(".smallimg").width();
			$(".outer").mouseover(function(){		//鼠标划过outer时

				$('.smallimg').addClass('show').removeClass('hide')
				
				$('.bigimg').addClass('show').removeClass('hide')
				
				})

				$('.outer').mousemove(function(e){	//鼠标在outer中移动时
					var e=e||event;
					var x=e.clientX-$(".outer")[0].offsetLeft-$(".smallimg").width()/2;
					var y=e.clientY-$(".outer")[0].offsetTop-$(".smallimg").height()/2;
					console.log($(".outer")[0].offsetLeft)
					var xmax=$(".outer").width()-$(".smallimg").width()
					var ymax=$(".outer").height()-$(".smallimg").height()


					if(x<0){
						x=0
					}
					if(x>xmax){
						x=xmax
					}
					if(y<0){
						y=0
					}
					if(y>ymax){
						y=ymax
					}
					
					$(".smallimg").css("left",x)
					$(".smallimg").css("top",y)

					$(".bigimg").scrollLeft(x*rata)
					$(".bigimg").scrollTop(y*rata)
				})

			

			$(".outer").mouseout(function(){
				$('.smallimg').addClass('hide').removeClass('show')
				$('.bigimg').addClass('hide').removeClass('show')
			})
			


		})
	</script>
</body>
</html>